<template>
  <div class="customModel">
    <custom-model-tree ref="customModelTree"
     class="customModelTree"
     :modelType="modelTypeQ"
     :collapseDataSelVal="collapseDataSelVal"
     @change="customModelTreeChange"></custom-model-tree>
    <div class="customModelContent">
      <div class="customModelContentHeader">
        <a-input-search v-model="modelName" @search="getCategoryList"
         placeholder="请输入关键字搜索" style="width: 300px" />
        <div class="customModelContentBtnBox">
          <span v-if="moreModalSelectJudge" style="margin-right: 10px;">已选择 <font style="color: #e28003;">  {{moreModalSelectData.length}} </font> 个 </span>
          <a-button v-if="moreModalSelectJudge" type="primary" @click="selectAll()">
            {{moreModalSelectAll ? '取消全选' : '全选'}}
          </a-button>
          <a-button type="primary" @click="moreModalSelectJudge = !moreModalSelectJudge;moreModalSelectData = [];">
            {{moreModalSelectJudge ? '关闭多模型选择' : '选择多模型'}}
          </a-button>
          <a-button type="primary" @click="multiProjectVisible=true" v-if="moreModalSelectJudge">
            导出多模型
          </a-button>
<!--          <a-button type="primary" @click="modalShow()">创建模型</a-button>-->
        </div>
      </div>
      <div class="customModelContentSub">
        <div class="customModelContentSubItem" v-for="item in list"
         :class="{'customModelContentSubSelItem':moreModalSelectData.includes(item.id)}"
         :key="item.id" @click="modelItemClick(item)">
          <i
            :class="item.category == 1 ? 'customModelContentSubBoxHeaderIcon' :'customModelContentSubBoxHeaderEditIcon'"
            title="编辑"></i>
          <div class="customModelContentSubItemContent">
            <div class="customModelContentSubItemConTitle">
              {{ item.modelName }}
              <span :class="{ 'customModelContentSubItemCategoryConTitle' : item.category != 1}">{{ item.category == 1 ? '固定' : '配置' }}</span>
            </div>
            <div class="customModelContentSubItemConText customModelContentSubItemConText1">
              <span>类别：</span>{{ item.type_dictText }}
            </div>
            <a-tooltip>
              <template slot="title">
                {{ item.remarks || '无' }}
              </template>
              <div class="customModelContentSubItemConText customModelContentSubItemConText2"
               @click="basicInformationShow(item.id)">
                <span>说明：</span>{{ item.remarks || '无' }}
              </div>
            </a-tooltip>
          </div>
          <div class="customModelContentSubItemBtnBox" v-if="!moreModalSelectJudge">
            <div class="customModelContentSubItemBtnFlex">
              <template v-if="item.category == 0">
                <a-button class="customModelContentSubItemBtn" @click="copy(item)">复制</a-button>
<!--                <a-button class="customModelContentSubItemBtn" @click="toPZ(item, false)">配置</a-button>-->
              </template>
              <a-button class="customModelContentSubItemBtn" @click="toPZ(item, true)" type="primary">运行</a-button>
            </div>
          </div>
<!--          <i title="删除" @click="delModelEvent(item)" v-if="!moreModalSelectJudge && item.category == 0"
            class="customModelContentSubBoxHeaderDelIcon"></i>-->
        </div>
        <div style="text-align: right;">
          <a-pagination v-model="listPageData.pageNo" :total="listPageData.total"
            :pageSize="listPageData.pageSize" @change="getCategoryList"
            show-less-items />
        </div>
      </div>
    </div>

    <a-modal
      :title="`${modalTitle}模型`"
      :visible="modalVisible"
      :confirm-loading="confirmLoading"
      @cancel="handleCancel"
    >
      <template slot="footer">
        <div class="basicInformationFooter">
          <a-button @click="handleCancel">
            关闭
          </a-button>
          <a-button @click="handleOk"
                    type="primary" v-if="!modelFormDisabled">
            确定
          </a-button>
        </div>
      </template>
      <a-form-model ref="ruleForm" :model="modalForm"
       :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="模型名称" prop="modelName">
          <a-input v-model="modalForm.modelName" placeholder="请输入模型名称" :disabled="modelFormDisabled" />
        </a-form-model-item>
        <a-form-model-item label="模型排序" prop="mxOrder">
          <a-input-number v-model="modalForm.mxOrder" style="width: 100%;" :disabled="modelFormDisabled"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="执行顺序" prop="mxOrder">
          <a-input-number v-model="modalForm.runOrder"
                          :min="0"
                          :formatter="(value) => `${value}`"
                          :precision="0"
                          :parser="(value) => value.replace('.', '')"
                          style="width: 100%;" :disabled="modelFormDisabled"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="模型类别" prop="modelType">
          <a-select v-model="modalForm.modelType" placeholder="请选择模型类别" :disabled="modelFormDisabled">
            <a-select-option value="1">标准模型</a-select-option>
            <a-select-option value="2">我的模型</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="模型分类" prop="type">
          <a-tree-select
            v-model="modalForm.type"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="typeList"
            :replaceFields="{ title: 'typeName', key:'id', value: 'id' }"
            placeholder="请选择模型分类"
            :disabled="modelFormDisabled"
          ></a-tree-select>
        </a-form-model-item>
        <a-form-model-item label="模型说明" prop="remarks">
          <a-input v-model="modalForm.remarks" type="textarea" placeholder="请输入模型说明" :disabled="modelFormDisabled"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <!-- 基本信息 弹窗 -->
    <a-modal
      :width="1000"
      title="基本信息"
      :visible="basicInformationVisible"
      @cancel="basicInformationVisible = false;basicInformationEdit = false;"
    >
      <div class="basicInformation">
<!--        <a-icon type="form" v-if="!basicInformationEdit" @click="basicInformationEditEvent" title="编辑"
          style="font-size: 20px;" class="basicInformationEditIcon" />-->
        <div class="basicInformationItem" v-for="(item, index) in basicInformationData" :key="index">
          <div class="basicInformationItemHeader">
            <i class="basicInformationItemHeaderIcon"></i>
            <div class="basicInformationItemHeaderTxt">{{ item.title }}</div>
          </div>
          <div class="basicInformationItemContent">
            <template v-if="!basicInformationEdit"><span>{{ item.content }}</span></template>
            <template v-else>
              <a-textarea
                v-model="item.content"
                :auto-size="{ minRows: 3, maxRows: 5 }"
              />
            </template>
          </div>
          <div class="basicInformationItemLine" v-if="index != (basicInformationData.length - 1)"></div>
        </div>
      </div>
      <template slot="footer">
        <div class="basicInformationFooter">
          <a-button v-if="basicInformationEdit"
          @click="basicInformationEditCancel" style="margin-right: 15px;">
            取消
          </a-button>
          <a-button @click="basicInformationEditOk"
          type="primary" v-if="basicInformationEdit">
            保存
          </a-button>
        </div>
      </template>
    </a-modal>

    <!-- 导出多项目 弹窗 -->
    <a-modal
      :width="600"
      title="导出多模型"
      :visible="multiProjectVisible"
      @cancel="multiProjectVisible = false;multiProjectData = {}"
      @ok="exportMoreModel"
      :confirmLoading="moreModalSelectLLoading"
    >
      <a-form-model ref="ruleForm" :model="multiProjectData"
       :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-form-model-item label="部门" prop="pro">
          <j-select-depart
            v-model="multiProjectData.pro"
            :multi="true"
            type="all"
            :backDepart="true"
            @back="backDepartInfo"
          />
        </a-form-model-item>
        <a-form-model-item label="查询时段" prop="time">
          <a-range-picker
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 100%"
            v-model="multiProjectData.time"
            @change="handleMultiProjectDatechange"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { getAction, postAction, putAction, deleteAction } from '@/api/manage'
import customModelTree from './components/customModelTree.vue'
import { queryMyDeptTreeByParentIds } from '@/api/api'
export default {
  components: { customModelTree },
  name: 'customModel',
  data() {
    return {
      modelFormDisabled:false,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      modelTypeQ: 1,
      modelName: '',
      collapseDataSelVal: [],
      typeList: [],
      listPageData: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      list: [],
      modalTitle: '新增',
      modalVisible: false,
      confirmLoading: false,
      modalForm: {},
      tabsList: [],
      modelId: null,
      basicInformationEdit: false,
      basicInformationData: [
        { value: 'mxdy', title: '模型定义' },
        { value: 'sjal', title: '实际案例' },
        { value: 'sjwt', title: '审计问题' },
        { value: 'wtdx', title: '问题定性' },
      ],
      basicInformationVisible: false,
      moreModalSelectJudge: false,
      moreModalSelectLLoading: false,
      moreModalSelectData: [],
      multiProjectVisible: false,
      multiProjectData: {},
      proTreeData: [],
      proDefaultTreeData: [],
      url: {
        queryById: '/sjmx2/modelTemplateConfig/queryById',
        getCategoryList: '/sjmx2/modelTemplateConfig/categoryList',
        copyModel: '/sjmx2/modelTemplateConfig/copy',
        addModelTemplateConfig: '/sjmx2/modelTemplateConfig/add',
        editModelTemplateConfig: '/sjmx2/modelTemplateConfig/edit',
        deleteModelTemplateConfig: '/sjmx2/modelTemplateConfig/delete',
        getTypeList: '/sjmx2/modelTemplateTypeConfig/typeList',
        exportMoreModel: '/sjmx2/modelTemplateRun/exportMoreModelAndPro',
        searchBy: 'sys/sysDepart/searchBy',
        addConclusion: '/sjmx2/modelTemplatePointSort/addConclusion',
      },
    }
  },
  mounted() {
    this.getTypeList();
    this.queryMyDeptTreeByParentIds();
  },
  computed:{
    moreModalSelectAll(){
      return this.list.length > 0 && this.list.every(item => this.moreModalSelectData.includes(item.id));
    }
  },
  methods: {
    selectAll() {
      if (this.moreModalSelectJudge) {
        if (!this.moreModalSelectAll) {
          this.moreModalSelectData = Array.from(new Set([...this.moreModalSelectData, ...this.list.map(item => item.id)]));
        } else {
          this.moreModalSelectData = this.moreModalSelectData.filter(id => !this.list.some(item => item.id === id));
        }

        console.log(this.moreModalSelectData)
      }
    },

    handleMultiProjectDatechange(e) {
      if(e && e.length) {
        this.$set(this.multiProjectData, 'startTime', e[0]);
        this.$set(this.multiProjectData, 'endTime', e[1]);
      }else {
        this.$set(this.multiProjectData, 'startTime', null);
        this.$set(this.multiProjectData, 'endTime', null);
      }
    },
    searchBy(e) {
      if(!e) {
        this.proTreeData = this.proDefaultTreeData;
        return
      }
      getAction(this.url.searchBy + '?keyWord=' + e).then((res)=>{
        if(res.code == 0) {
          this.proTreeData = res.result || [];
        }
      })
    },
    queryMyDeptTreeByParentIds() {
      queryMyDeptTreeByParentIds().then((res)=>{
        if(res.code == 0) {
          this.proDefaultTreeData = res.result;
          this.proTreeData = res.result;
        }
      })
    },
    modelItemClick(data) {
      if(this.moreModalSelectJudge) {
        let index = this.moreModalSelectData.indexOf(data.id);
        if(index == -1) {
          this.moreModalSelectData.push(data.id);
        }else {
          this.moreModalSelectData.splice(index, 1);
        }
      }
    },
    multiProjectDataProIdChange(value, label) {
      // this.$set(this.multiProjectData, 'proName', label[0]);
      this.$set(this.multiProjectData, 'proId', value.map(item => item.value).join(','))
      this.$set(this.multiProjectData, 'proName', value.map(item => item.label).join(','))
    },

    backDepartInfo(info) {
      this.$set(this.multiProjectData, 'proId', info.map(item => item.value).join(','))
      this.$set(this.multiProjectData, 'proName', info.map(item => item.text).join(','))
    },
    
    exportMoreModel() {
      let that = this
      this.moreModalSelectLLoading = true;
      let params = {
        ids: this.moreModalSelectData.join(','),
        ...this.multiProjectData
      }
      getAction(this.url.exportMoreModel, params).then((res)=>{
        this.moreModalSelectLLoading = false;
        if(res.code == 200) {
          this.multiProjectVisible = false
          let url = `${window._CONFIG['domianURL']}/sys/common/download` + res.result.path
          window.open(url, '_blank')

          that.$confirm({
            content: '是否将结论导出到疑点梳理里？',
            onOk() {
              return new Promise((resolve, reject) => {
                postAction(that.url.addConclusion, {taskId:res.result.taskId,...params}).then((res) => {
                  if (res.success) {
                    that.moreModalSelectJudge = false
                    that.moreModalSelectData = []
                    that.multiProjectData = {}
                    that.$message.success('导出到疑点成功')
                    that.$destroyAll()
                    setTimeout(() => {
                      that.$router.push({ name: 'ydsl' })
                    }, 100)
                  } else {
                    that.$destroyAll()
                    that.$message.error(res.message)
                  }
                  resolve()
                })
              })
            },
            cancelText: '取消',
            onCancel() {
              that.moreModalSelectJudge = false
              that.moreModalSelectData = []
              that.multiProjectData = {}
              that.$destroyAll()
            }
          })
        } else {
          this.$message.error(res.message)
        }
      })
    },
    basicInformationEditOk() {
      let jbxx = {};
      for(let item of this.basicInformationData) {
        jbxx[item.value] = item.content
      }
      putAction(this.url.editModelTemplateConfig, { id: this.modelId, jbxx: JSON.stringify(jbxx) }).then((res)=>{
        if(res.code == 200) {
          this.$message.success('保存成功')
          this.basicInformationEdit = false;
        }
      })
    },
    basicInformationEditCancel() {
      this.basicInformationEdit = false;
      for(let item of this.basicInformationData) {
        this.$set(item, 'content', item.defaultContent);
      }
    },
    basicInformationEditEvent() {
      if(this.moreModalSelectJudge) {
        return
      }
      this.basicInformationEdit = true;
    },
    basicInformationShow(id) {
      if(this.moreModalSelectJudge) {
        return
      }
      this.basicInformationVisible = true;
      getAction(this.url.queryById, { id }).then((res)=>{
        if(res.code == 200) {
          let jbxx = JSON.parse(res.result.jbxx ? res.result.jbxx : '{}');
          for(let key in jbxx) {
            for(let i=0;i<this.basicInformationData.length;i++) {
              let item = this.basicInformationData[i];
              if(item.value == key) {
                this.$set(this.basicInformationData[i], 'content', jbxx[key]);
                this.$set(this.basicInformationData[i], 'defaultContent', jbxx[key]);
              }
            }
          }
          this.doubtfulPointRulesData = [res.result.ydgz]
        }
      })
    },
    editTreeData(list, type) {
      for(let data of list) {
        let children = data.children;
        if(children && children.length) {
          // data.selectable = false;
          data.children = this.editTreeData(children, type);
        }else {
          // data.selectable = true;
        }
      }
      return list
    },
    getTypeList() {
      getAction(this.url.getTypeList).then((res)=>{
        if(res.code == 200) {
          this.typeList = this.editTreeData(res.result);
        }
      })
    },
    getCategoryList() {
      let params = {
        type: this.collapseDataSelVal[0].split('-')[1],
        modelType: this.collapseDataSelVal[0].split('-')[0],
        modelName: this.modelName,
        pageNo: this.listPageData.pageNo,
        pageSize: this.listPageData.pageSize,
      }
      getAction(this.url.getCategoryList, params).then((res)=>{
        if(res.code == 200) {
          this.list = res.result.records;
          this.$set(this.listPageData, 'total', res.result.total);
        }
      })
    },
    copy(data) {
      const that = this;
      that.$confirm({
        title: '确认复制?',
        onOk() {
          getAction(that.url.copyModel, { id: data.id }).then((res)=>{
            if(res.code == 200) {
              that.$message.success(res.result);
              that.getCategoryList();
            }
          })
        },
        onCancel() {},
      });
    },
    toPZ(e, isReset) {
      if(isReset) {
        this.$router.push('/zdypzbb/worker?id=' + e.id);
      }else {
        this.$router.push('/zdypzbb?id=' + e.id);
      }
    },
    customModelTreeChange(e) {
      this.collapseDataSelVal = e
      this.moreModalSelectJudge = false
      this.multiProjectData = {}
      this.moreModalSelectData = []
      this.listPageData = {
        pageNo: 1,
        pageSize: 10,
        total: 0
      }
      this.getCategoryList()
    },
    modalShow(data) {
      if(this.moreModalSelectJudge) {
        return
      }
      if(data && data.id) {
        this.modelFormDisabled = true
        this.modalForm = {};
        for(let key in data) {
          this.$set(this.modalForm, key, data[key]);
        }
        this.modalTitle = '查看';
        // this.modalTitle = '编辑';
      }else {
        this.modelFormDisabled = false
        this.$set(this.modalForm, 'modelType', '2');
        this.modalTitle = '新增';
      }
      this.modalVisible = true;
    },
    async handleOk() {
      this.confirmLoading = true;
      let res = null;
      if(this.modalForm.id) {
        res = await this.editModelTemplateConfig();
      }else {
        res = await this.addModelTemplateConfig();
      }

      if(res.code == 200) {
        this.$message.success(this.modalForm.id ? '修改成功' : '添加成功');
        this.getCategoryList();
        this.handleCancel();
      }
    },
    addModelTemplateConfig() {
      return new Promise((next)=>{
        postAction(this.url.addModelTemplateConfig, this.modalForm).then((res)=>{
          next(res);
        })
      })
    },
    editModelTemplateConfig() {
      return new Promise((next)=>{
        putAction(this.url.editModelTemplateConfig, this.modalForm).then((res)=>{
          next(res);
        })
      })
    },
    handleCancel() {
      this.modalVisible = false;
      this.confirmLoading = false;
      this.modalForm = {};
    },
    delModelEvent(data) {
      const that = this;
      that.$confirm({
        title: '确认删除?',
        onOk() {
          deleteAction(that.url.deleteModelTemplateConfig, { id: data.id }).then((res)=>{
            if(res.code == 200) {
              that.$message.success('删除成功');
              that.getCategoryList();
            }
          })
        },
        onCancel() {},
      });
    },
  }
}
</script>

<style lang="less" scoped>
.customModel {
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.customModelTree {
  width: 350px;
}
.customModelContent {
  background-color: #ffffff;
  border-radius: 25px;
  height: 100%;
  width: calc(100% - 350px - 20px);
}
.customModelContentHeader {
  height: 55px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #EAEAEA;
}
.customModelContentBtnBox {
  .ant-btn {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}
.customModelContentSub {
  height: calc(100% - 55px);
  padding: 15px 20px;
  overflow: auto;
}
.customModelContentSubBox {
  position: relative;
  height: 210px;
  border: 1px solid #E1E1E1;
  border-radius: 8px;
  transition: all .1s;
  padding: 20px 0;
  box-sizing: border-box;
  &:hover {
    border-color: #7A94D9;
  }
  &:hover .customModelContentSubBoxHeaderDelIcon {
    display: inline-block;
  }
}
.customModelContentSubCategoryBox {
  &:hover {
    border-color: rgba(255,153,12, 1);
  }
  .customModelContentSubBoxHeader {
    background-color: rgba(255,153,12, 1);
  }
}
.customModelContentSubEditIcon {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}
.customModelContentSubBoxHeader {
  position: relative;
  padding: 10px 10px 10px 0;
  width: 80%;
  font-size: 18px;
  color: #FFFFFF;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: rgba(49, 84, 165, 1);
}
.customModelContentSubItem {
  display: flex;
  align-items: center;
  position: relative;
  background: inherit;
  //background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(49, 84, 165, 0.5);
  background: -webkit-linear-gradient(90deg,#ACE0F9 0%,#FFFFFF 70%);
  background: linear-gradient(90deg,#ACE0F9 0%,#FFFFFF 70%);

  border-radius: 5px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  padding: 15px 20px;
  margin-bottom: 15px;
  &:hover .customModelContentSubBoxHeaderDelIcon {
    display: block;
  }
}
.customModelContentSubSelItem {
  border-color: #f88807;
  background: -webkit-linear-gradient(90deg, rgba(250, 173, 20, 0.5) 0%,#FFFFFF 70%);
  background: linear-gradient(90deg,rgba(250, 173, 20, 0.5) 0%,#FFFFFF 70%);
  /*border-color: rgba(49, 84, 165, 1);
  background: -webkit-linear-gradient(90deg,#ACE0F9 0%,#FFFFFF 70%);
  background: linear-gradient(90deg,#ACE0F9 0%,#FFFFFF 70%);*/
}
.customModelContentSubBoxHeaderIcon {
  cursor: pointer;
  display: inline-block;
  width: 86px;
  height: 86px;
  background-image: url('../../../assets/new_modal/model_icon.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.customModelContentSubBoxHeaderEditIcon {
  cursor: pointer;
  display: inline-block;
  width: 86px;
  height: 86px;
  background-image: url('../../../assets/new_modal/model_edit_icon.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.customModelContentSubItemContent {
  display: inline-block;
  width: calc(100% - 86px - 64px);
  padding: 0 20px;
  box-sizing: border-box;
}
.customModelContentSubItemConTitle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #3154A5;
  &>span {
    padding: 2px 4px;
    font-size: 14px;
    color: #ffffff;
    border-radius: 4px;
    margin-left: 5px;
    background-color: #3154A5;
  }
  &>.customModelContentSubItemCategoryConTitle {
    background-color: rgba(255,153,12, 1);
  }
}
.customModelContentSubItemConText {
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &>span {
    font-size: 14px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    color: #333333;
    line-height: normal;
  }
}
.customModelContentSubItemConText1 {
  font-size: 14px;
  color: rgb(49, 84, 165);
  line-height: normal;
  letter-spacing: normal;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
}

.customModelContentSubItemConText2 {
  white-space: unset;
  display: -webkit-box;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;

  cursor: pointer;
  font-size: 14px;
  color: rgb(127, 127, 127);
  line-height: normal;
  letter-spacing: normal;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;

  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 38px;
}
.customModelContentSubBoxCon {
  padding: 20px;
  &>div {
    margin-bottom: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.customModelContentSubItemBtnBox {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  align-items: center;
  width: 64px;
  &>.ant-btn {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}
.customModelContentSubItemBtnFlex {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.customModelContentSubItemBtn {
  margin-bottom: 8px;
  &:last-child {
    margin-bottom: 0;
  }
}
.customModelContentSubBoxHeaderDelIcon {
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url('../../../assets/new_modal/delModelIcon.png');
}

.basicInformation {
  position: relative;
  .basicInformationEditIcon {
    position: absolute;
    top: -15px;
    right: 0;
  }
}
.basicInformationItem {
  .basicInformationItemHeader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .basicInformationItemHeaderIcon {
    display: inline-block;
    width: 6px;
    height: 18px;
    background-color: rgba(49, 84, 164, 1);
    margin-right: 10px;
  }
  .basicInformationItemHeaderTxt {
    font-size: 18px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    color: #333333;
    line-height: normal;
  }
  .basicInformationItemContent {
    margin-top: 15px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    color: #333333;
    font-size: 14px;
    text-align: left;
    line-height: 25px;
  }
  .basicInformationItemLine {
    width: 100%;
    height: 1px;
    background-color: #3154A4;
    margin: 15px 0;
  }
}
.basicInformationFooter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>